<template>
  <div class="p-4 md:p-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
      <div>
        <h1 class="text-2xl md:text-3xl font-bold">设置</h1>
        <p class="text-slate-500">管理你的酿造偏好和系统设置</p>
      </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 基本设置 -->
      <div class="bg-white rounded-lg shadow-md p-6 lg:col-span-2">
        <h2 class="text-xl font-semibold mb-4">基本设置</h2>
        
        <div class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">酿造厂名称</label>
            <input 
              type="text" 
              v-model="settings.breweryName"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
              placeholder="输入你的酿造厂名称"
            />
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">默认批次大小</label>
            <div class="flex items-center space-x-2">
              <input 
                type="number" 
                v-model="settings.defaultBatchSize"
                class="p-2 w-32 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
                min="1"
                step="0.5"
              />
              <span class="text-slate-500">加仑</span>
            </div>
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">温度单位</label>
            <select 
              v-model="settings.temperatureUnit"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
            >
              <option value="F">华氏度 (°F)</option>
              <option value="C">摄氏度 (°C)</option>
            </select>
          </div>

          <div>
            <label class="block text-sm font-medium text-slate-700 mb-1">重量单位</label>
            <select 
              v-model="settings.weightUnit"
              class="p-2 w-full border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-brew-amber focus:border-transparent"
            >
              <option value="lb">磅 (lb)</option>
              <option value="kg">千克 (kg)</option>
            </select>
          </div>
        </div>
      </div>

      <!-- 通知设置 -->
      <div class="bg-white rounded-lg shadow-md p-6">
        <h2 class="text-xl font-semibold mb-4">通知设置</h2>
        
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <div>
              <h3 class="font-medium">库存提醒</h3>
              <p class="text-sm text-slate-500">当原料库存低时通知</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" v-model="settings.notifications.inventory" class="sr-only peer">
              <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brew-amber/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brew-amber"></div>
            </label>
          </div>

          <div class="flex items-center justify-between">
            <div>
              <h3 class="font-medium">发酵提醒</h3>
              <p class="text-sm text-slate-500">发酵阶段完成时通知</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" v-model="settings.notifications.fermentation" class="sr-only peer">
              <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brew-amber/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brew-amber"></div>
            </label>
          </div>

          <div class="flex items-center justify-between">
            <div>
              <h3 class="font-medium">系统更新</h3>
              <p class="text-sm text-slate-500">有新功能时通知</p>
            </div>
            <label class="relative inline-flex items-center cursor-pointer">
              <input type="checkbox" v-model="settings.notifications.updates" class="sr-only peer">
              <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brew-amber/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-slate-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brew-amber"></div>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="mt-6 flex justify-end">
      <button 
        class="px-4 py-2 bg-brew-amber text-white rounded-md hover:bg-amber-600 transition"
        @click="saveSettings"
      >
        保存设置
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const settings = ref({
  breweryName: '',
  defaultBatchSize: 5,
  temperatureUnit: 'F',
  weightUnit: 'lb',
  notifications: {
    inventory: true,
    fermentation: true,
    updates: true
  }
})

const saveSettings = () => {
  // 这里添加保存设置的逻辑
  console.log('Settings saved:', settings.value)
}
</script> 